<template>
  <div class="flex flex-col h-full">
    <div class="flex-shrink-0">
      <PersonSearchForm @search="onSearch"></PersonSearchForm>
    </div>
    <div class="flex-1 h-0">
      <PersonTable ref="PersonTableRef" :form-data="formData"></PersonTable>
    </div>
  </div>
</template>

<script setup lang="ts">
import PersonTable from './components/PersonTable.vue'
import PersonSearchForm from './components/PersonSearchForm.vue'
import { ref } from 'vue'
import { PersonFormData } from './components/typing'

const PersonTableRef = ref<InstanceType<typeof PersonTable>>()
const formData = ref<PersonFormData>({
  /**
   * 姓名
   */
  name: '',
  /**
   * 性别
   */
  male: undefined,
})
function onSearch(val: PersonFormData) {
  formData.value = val
  PersonTableRef.value?.JsonPageTableRef?.refresh(1)
}
</script>

<style scoped></style>
